import { Handle, Position, useHandleConnections } from '@xyflow/react';
import { memo } from 'react';

const CustomHandle = (props) => {
  const { style } = props
  const connections = useHandleConnections({
    type: props.type,
    id: props.id,
  });

  return (
    <Handle
      {...props}
      style={{
        ...style,
        background: "transparent",
        height: 20,
        borderRadius: 0,
        width: 20,
        border: 0,
      }}
      isConnectable={connections.length < props.count}
    >
      <div className='h-[10px] w-[10px] rounded-[10px] bg-[#689AFF] translate-x-[5px] translate-y-[5px] pointer-events-none' />
    </Handle>
  );
};

export default memo(CustomHandle);
